<template>
  <div id="personalCenter">
    <div class="user-info">
      <div class="img">
         <img :src="imgSrc" class="user-img">
      </div>
      <div>
        <span :class="userName" style="color:#fff">{{ userName }}</span>
      </div>
    </div>
    <div class="title">我的酒柜</div>
    <group class="my-wine-cabinet">
      <swipeout-item 
        v-for="(device, index) in uiDevicesList"
        @on-open="closeAnotherSwipeoutItem(index)"
        transition-mode="follow" 
        underlay-color="#ccc"
        ref="swipeoutItem"
        :key="device"
        :threshold = '.01'
        :right-menu-width="buttonWidth*2"
        class="vux-1px-b">
        <div slot="right-menu">
          <swipeout-button :width='buttonWidth' @click.native="deviceRenameTip(device)" class="renameBg"></swipeout-button>
          <swipeout-button :width='buttonWidth' @click.native="deviceUnbindingTip(device)" class="unbindingBg"></swipeout-button>
        </div>
        <div slot="content">
          <cell-box>
            <img src="../../assets/image/wine.png" class="wine-cabinet__img--size">
            </span>
            <div class="device">
              <div class="deviceId">{{ device.deviceRename }}</div>
              <div class="deviceName">{{ device.deviceName }}</div>
            </div>
          </cell-box>
        </div>
      </swipeout-item>
    </group>
    <div class="plusIconBg" @click="addDevice"></div>

    <!--重命名弹窗-->
    <div v-transfer-dom class="renameWindow">
      <confirm v-model="rename"
      :title="reNameTitle"
      @on-confirm="onConfirmRename">
        <x-input type="text" v-model.trim="deviceNewName" :placeholder="deviceNewName" class="borderStyle" :max="12"></x-input>
      </confirm>
    </div>

    <!--解绑设备弹窗-->
    <div v-transfer-dom class="unbindingWindow">
      <confirm v-model="unbindingDevice"
      :title="unbindingCurrentDevice"
      @on-confirm="onConfirmDeviceUnbinding()">
        <p>'解绑设备后将无法使用手机控制，确定解绑此设备？'</p>
      </confirm>
    </div>

  </div>
</template>
<script>
import {Group, Cell, Swipeout, SwipeoutItem, SwipeoutButton, XButton, CellBox, XInput, Confirm, Flexbox, FlexboxItem, TransferDomDirective as TransferDom} from 'vux'
import api from '@/api'
import wx from 'weixin-js-sdk'
export default {
  name: 'personalCenter',
  directives: {
    TransferDom
  },
  components: {
    api,
    Group,
    Cell,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    XButton,
    CellBox,
    XInput,
    Confirm,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      userName: '',
      imgSrc: '../../assets/image/imgSrc.png',
      reNameTitle: '重命名',
      deviceNewName: '',
      deviceMac: '',
      currentDevice: '',
      unbindingCurrentDevice: '解绑设备',
      rename: false,
      unbindingDevice: false,
      devicesList: [],
      buttonWidth: '',
      ticket: ''
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.init()
      this.getButtonWidth()
    })
  },
  methods: {
    closeAnotherSwipeoutItem (currentIndex) {
      this.$refs.swipeoutItem.forEach((item, index) => {
        if (currentIndex !== index) {
          this.$refs.swipeoutItem[index].close()
        }
      })
    },
    onConfirmRename () {
      let deviceNameList = []
      let deviceId = ''
      this.devicesList.forEach((item) => {
        if (item.device_name) {
          deviceNameList.push(item.device_name)
        }
        if (item.device_mac === this.currentDevice.deviceMac) {
          deviceId = item.device_id
        }
      })
      if (deviceNameList.indexOf(this.deviceNewName) === -1) {
        api.changeDeviceName(deviceId, {'device_name': this.deviceNewName}).then(res => {
          this.getDeviceList()
        })
      } else {
        alert('设备名已经使用，请重新命名')
      }
    },

    addDevice () {
      wx.scanQRCode()
    },

    deviceRenameTip (device) {
      // TODO 调用修改接口发送给后台
      this.currentDevice = device
      this.deviceMac = device.deviceMac
      this.deviceNewName = device.deviceRename ? device.deviceRename : device.deviceMac
      this.rename = !this.rename
    },

    deviceUnbindingTip (currentDevice) {
      // TODO 调用解绑接口发送给后台
      this.currentDevice = currentDevice
      this.unbindingDevice = !this.unbindingDevice
    },
    onConfirmDeviceUnbinding () {
      let currentDevice = this.currentDevice
      let deviceId = currentDevice.deviceId
      let _self = this
      wx.invoke('getWXDeviceTicket', {'deviceId': deviceId, 'type': 2}, function (res) {
        api.unbindingDevice(deviceId, res.ticket).then(res => {
          let userId = window.localStorage.getItem('userId')
          api.unsubscribe(userId, { 'device_id': deviceId }).then(res => {
            _self.init()
            _self.getButtonWidth()
          })
        })
      })
    },
    getDeviceList () {
      api.getDeviceList().then(res => {
        this.devicesList = res.data.devices
      })
    },
    init () {
      this.getDeviceList()
      // 微信用户信息
      api.getUserInfo().then(res => {
        this.userName = res.data.nickname
        this.imgSrc = res.data.headimgurl
      })
    },
    getButtonWidth () {
      this.buttonWidth = this.$el.clientHeight * 13.2 / 100
    }
  },
  computed: {
    uiDevicesList () {
      let list = []
      this.devicesList.forEach((item) => {
        let device = {
          deviceMac: item.device_mac,
          deviceRename: item.device_name ? item.device_name : item.device_mac,
          deviceName: '美晶红酒柜',
          deviceId: item.device_id
        }
        list.push(device)
      })
      return list
    }
  }
}
</script>
<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
#personalCenter {
  height: 100%;
  position: relative;
  .user-info {
    height: 30vh;
    text-align: center;
    background-color: #ae2051;
    padding-top: 7vh;
    box-sizing: border-box;
    background: linear-gradient(to right, #b22451, #83034c);
    .img {
      display: inline-block;
      width: 23vw;
      height: 23vw;
      background: linear-gradient(to right, #b22451, #83034c);
      border-radius: 50%;
      .user-img {
        // font-size: 23vw;
        // color: #d28da8;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .nick {
      font-size: 24px;
    }
  }
  .title {
    background-color: #e5e5e5;
    position: absolute;
    height: 5.8vh;
    line-height: 5.8vh;
    text-indent: 2.32vh;
    font-size: 2.0vh;
    width: 100%;
  }
  .my-wine-cabinet {
    margin-top: 5.8vh;
    .renameBg {
      width: 13.2vh !important;
      background: url(../../assets/image/renameBg.png) no-repeat;
      background-size: 13.2vh 13.57vh;
    }
    .unbindingBg {
      // width: 13.26vh !important;
      width: 13.2vh !important;
      background: url(../../assets/image/unbindingBg.png) no-repeat;
      background-size: 13.2vh 13.57vh;
    }
    .vux-cell-box {
      padding: 2.6vh 2.32vh;
      .wine-cabinet__img--size {
        width: 7.1vh;
        height: 7.1vh;
        vertical-align: top;
      }
      .device {
        display: inline-block;
        text-indent: 10px;
        font-weight: 400;
        .deviceId {
          font-size: 2.65vh;
        }
        .deviceName {
          color: #b5b5b6;
          font-size: 2.32vh;
        }
      }
    }
  }
  .icon--add {
    position: absolute;
    top: 25%;
    right: 6vw;
    z-index: 999;
  }
  .plusIconBg {
    width: 9vh;
    height: 9vh;
    border-radius: 50%;
    position: absolute;
    top: 24.5%;
    right: 2.65vh;
    z-index: 0;
    background-image: url(../../assets/image/addBg.png);
    background-size: 9vh 9vh;
  }
  .vux-x-icon {
    fill: #cd3e78;
  }
}
.renameWindow {
  .borderStyle {
    border: 1px solid #e3e3e3 !important;
    border-radius: 10px !important;
  }
} 
</style>
